<template>
<div style="transform: translateY(50%);width: 400px;margin: 0 auto !important;">
  <PageHeader hidden-breadcrumb style="background: transparent;">
    <template #content>
      <div><img src="https://file.iviewui.com/admin-plus-dist/img/logo.fe4f63bf.png" height="75"/></div>
      <div style="text-align: center;">View-Ui-Admin-Pro 中后台解决方案</div>
    </template>
  </PageHeader>
  <div class="demo-login">
    <Login @on-submit="handleSubmit">
        <UserName name="username" />
        <Password name="password" />
        <div class="demo-auto-login">
            <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
            <a>忘记密码</a>
        </div>
        <Submit />
    </Login>
    <div class="page-account-other">
      <span>其它登录方式</span>
      <img src="https://file.iviewui.com/admin-plus-dist/img/icon-social-wechat.c69ec08c.svg" alt="wechat" />
      <img src="https://file.iviewui.com/admin-plus-dist/img/icon-social-qq.2cf4276d.svg" alt="qq" />
      <img src="https://file.iviewui.com/admin-plus-dist/img/icon-social-weibo.cbf658a0.svg" alt="weibo" />
      <a href="/register" class="page-account-register">注册账户</a>
    </div>
  </div>
</div>
   
</template>

<script>
import { login } from '@/api/login'
import { timeFix } from '@/utils/util'
export default {
  name: 'Menus',
  props: {
      
  },
  setup() {

  },
  data () {
      return {
         autoLogin: true
      }
  },
  created(){
    
  },
  watch:{
    
  },
  methods: {
    handleSubmit (valid, { username, password }) {
      if (!valid) {
        this.$Notice.warning({title:'登录提醒',desc:'请输入用户名与密码'})
      }else{
        login({'username':username,'password':password}).then(res=>{
          if(res.code === 200){
            sessionStorage.userInfo = JSON.stringify(res.data[0]);
            this.$store.commit('setToken', res.data[0].token)
            this.$router.push({path:'/dahsboard/console'})
            this.$Notice.success({title:res.data[0].name,desc:`${timeFix()}，欢迎回来`})
          }else{
            this.$Notice.error({title:'登录失败',desc:res.message})
          }
        })
      }
    }
    
  }
}
</script>
<style>
    .demo-login{
        width: 400px;
        margin: 0 auto !important;
    }
    .demo-auto-login{
        margin-bottom: 24px;
        text-align: left;
    }
    .demo-auto-login a{
        float: right;
    }
    .page-account-other {
        margin: 24px 0;
        text-align: left;
    }
    .page-account-other img {
        width: 24px;
        margin-left: 16px;
        cursor: pointer;
        vertical-align: middle;
        opacity: .7;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    .page-account-register {
        float: right;
    }
</style>